<html>
<head>
	<style type="text/css">
		.centered {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 1px solid black;
			background-color: lightgrey;
		}
	</style>
	<script type="text/javascript">
	function getX(node) {
		var rect = node.getBoundingClientRect();
		return rect.left + window.scrollX;
	}

	function getY(node) {
		var rect = node.getBoundingClientRect();
		return rect.top + window.scrollY;
	}
	
	function fillCenter() {
		var div = document.getElementById("center");
		var x = getX(div);
		var y = getY(div);
		var width = div.getBoundingClientRect().width;
		var height = div.getBoundingClientRect().height;
		div.innerHTML = "x = " + x + ", y = " + y + "<br />width = " + width + ", height = " + height;
	}
	</script>
</head>
<body onload="fillCenter();">
	<div id="center" class="centered">
	text
	</div>
</body>
</html>